<template>
  <view class="wrapper" :style="{ padding: styleSate ? '0' : '0 20rpx' }">
    <template v-for="(item, index) in listData">
      <view v-if="!hideStatus.includes(item.approveStatus)" class="myContent" :key="index" @click="toDetail(item)">
        <view class="myContent_LR">
          <view class="myL">
            <view class="myLbox">
              <view class="myL_title">
                <text>
                  {{ item.buildingName + "-" + item.elevatorAddress || "--" }}
                </text>
                <template v-for="(it, i) in btnBoxList">
                  <text
                    class="status tag"
                    :key="i"
                    :style="{ color: it.color, borderColor: it.color }"
                    v-if="item.emerProcType && item.emerProcType == it.key"
                  >
                    {{ it.label }}
                  </text>
                </template>
                <text class="status tit_rep tag">配件</text>
              </view>
              <view class="myR_state">
                <text :style="{ color: resDataNameColor(item.auditStatusName) }">{{ item.auditStatusName }}</text>
                <text :style="{
                  'border-right':
                    '2rpx solid ' + resDataNameColor(item.auditStatusName),
                  'border-top':
                    '2rpx solid ' + resDataNameColor(item.auditStatusName),
                }"></text>
              </view>
            </view>
            <view class="myL_Time">
              {{ item.createTime || "--" }}
            </view>
            <view class="myL_reptit paddingB" v-if="item.status <= 7 || item.status > 9">
              <view>配件进度:</view>
              <view class="myL_state" :style="{
                border:
                  item.status >= 7 && item.status < 10
                    ? '2rpx solid #999999;'
                    : ' 2rpx solid #0091FF;',
                color:
                  item.status >= 7 && item.status < 10
                    ? '#999999;'
                    : '#0091FF;',
              }">
                {{ resNames(item.status, 1) || "--" }}</view>
            </view>
            <view class="myL_reptit">
              <view>配件类型:</view>
              <view class="myL_repName"> {{ resDataName(item.partsName) }}
<!--                <text v-if="item.partsName && item.floorStandNames">({{ item.floorStandNames.replaceAll(',', '>') -->
<!--                  }})</text> -->
              </view>
            </view>
<!--            <view class="myL_tit" v-if="item.categoryInfo"> -->
<!--              <view>配件名称:</view> -->
<!--              <view>{{ item.categoryInfo }}</view> -->
<!--            </view> -->
<!--            <view class="myL_tit"> -->
<!--              <view>配件型号:</view> -->
<!--              <view>{{ item.partsModel }}</view> -->
<!--            </view> -->
            <view class="myL_tit">
              <view>申请数量:</view>
              <view>{{ item.num || "--" }}</view>
            </view>
            <view class="myL_tit">
              <view>申请人:</view>
              <view>{{ item.createUserName || item.createUser || "--" }}</view>
            </view>
            <view class="myL_tit" v-if="isMy">
              <view>任务ID:</view>
              <view><text>{{ item.planId || "--" }}</text></view>
            </view>

            <view class="myL_tit" v-if="isMy && (item.approveStatus == 5 || item.approveStatus == 3)">
              <view class="red">{{ item.approveStatus == 5 ? "退回理由" : "终止原因" }}:</view>
              <view class="red">{{ item.remark || "无" }}</view>
            </view>
          </view>
        </view>
        <view class="myBg_relation" v-if="item.malPlanId || item.relationMalDetail">
          <block v-if="isMy">
            <view class="relation_up">
              <text>维修任务:</text>
              <text>{{ item.relationMalDetail.planId }}</text>
              <!-- <text class="tit_rep">维修</text> -->
              <view class="tag">{{
                item.relationMalDetail.workOrderType == 2
                  ? "客户报障"
                  : item.sourcePlanTypeName
                    ? "内部整改-" + (item.sourcePlanTypeName || "")
                    : "内部整改"
              }}</view>
            </view>
            <view class="relation_up" v-if="item.relationMalDetail.wxPlanDate">
              <text>计划执行时间:</text>
              <text>{{ item.relationMalDetail.wxPlanDate | formatDate }}</text>
            </view>
            <view class="relation_up" v-if="item.relationMalDetail.wxPlanFinishDate">
              <text>计划完成时间:</text>
              <text>{{
                item.relationMalDetail.wxPlanFinishDate | formatDate
              }}</text>
            </view>
          </block>
          <block v-else>
            <view class="relation_down" v-if="item.problemItemNames">
              <view>故障现象:</view>
              <block>
                <view class="down_text" v-for="(pro, i) in item.problemItemNames" :key="i">
                  <text>{{ pro }}</text>
                </view>
              </block>
            </view>
            <view class="relation_down" v-if="item.malPartsNames">
              <view>故障部件:</view>
              <block>
                <text class="malPartsNames">{{ item.malPartsNames }}</text>
              </block>
            </view>
          </block>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
export default {
	props: {
		listData: {
			type: Array,
			default: () => {
				return [];
			},
		},
		hideStatus: {
			type: Array,
			default: () => {
				return [];
			},
		},
		// 样式状态
		styleSate: {
			type: Boolean,
			default: false,
		},
		// 是否为我的申请
		isMy: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			statusList: ['全部', '待处理', '已受理', '未受理', '已撤回'],
			statusColor: ['#F7B500', '#6DD400', '#FA6400', '#999999'],
			statusColor2: ['#16BF99', '#0091FF', '#999999'],
			// 紧急程度标签
			btnBoxList: [
				// { color: '#0091FF', bgColor: '#dcf0ff', label: '较低', key: '4' }
				// { color: '#F7B500', bgColor: '#fff7e1', label: '一般', key: '3' },
				{ color: '#0091FF', bgColor: '#dcf0ff', label: '一般', key: 4 },
				{ color: '#F7B500', bgColor: '#fff7e1', label: '一般', key: 3 },
				{ color: '#fa6400', bgColor: '#ffecdf', label: '紧急', key: 2 },
				{ color: '#e02020', bgColor: '#ffecec', label: '紧急', key: 1 },
				// { color: '#e02020', bgColor: '#ffecec', label: '非常紧急', key: '1' },
			],
		};
	},
	filters: {
		formatDate(dateString) {
			const match = dateString.match(/\d{4}-\d{2}-\d{2}/);
			return match ? match[0] : '';
		},
	},
	methods: {
		resDataName(name) {
			if (!name) {
				return '--';
			}
			let partsName = name.replaceAll('&amp;&amp;','>');
			let result = [];
			let resultStr = '';
			if (partsName) {
				result = partsName.split(',');
				resultStr = result.map(v=>v.split('>')[v.split('>').length - 1]).join('、');
			}
			return resultStr || '--';
			// return name.replaceAll('&amp;&amp;','>');
		},
		resDataNameColor(name) {
			let colors = [
				{ name: '待审批', colorName: '#FA6400' },
				{ name: '审批中', colorName: '#FA6400' },
				{ name: '审批通过', colorName: '#16BF99' },
				{ name: '审批不通过', colorName: '#E02020' },
				{ name: '已撤回', colorName: '#999999' },
				{ name: '已退回', colorName: '#F7B500' },
			];
			let index = colors.findIndex((item) => item.name === name);
			if (index != -1) {
				return colors[index].colorName;
			}
			return '';
		},
		// 解析文本
		resNames(states, type) {
			let colors = [
				{ name: '需求审批', colorVal: '#0091FF', id: 0 },
				{ name: '信息审核', colorVal: '#0091FF', id: 1 },
				{ name: '销售生单', colorVal: '#0091FF', id: 2 },
				{ name: '销售生单', colorVal: '#0091FF', id: 10 },
				{ name: '待发货', colorVal: '#0091FF', id: 11 },
				{ name: '待发货', colorVal: '#0091FF', id: 3 },
				{ name: '待签收', colorVal: '#0091FF', id: 12 },
				{ name: '待分配', colorVal: '#FA6400', id: 4 },
				{ name: '待更换', colorVal: '#FA6400', id: 5 },
				{ name: '更换中', colorVal: '#0091FF', id: 6 },
				{ name: '已完成', colorVal: '#55A302', id: 7 },
				{ name: '已关闭', colorVal: '#333333', id: 8 },
				{ name: '已撤回', colorVal: '#333333', id: 9 },
			];
			let index = colors.findIndex((item) => item.id === states);
			if (type === 1) {
				if (index != -1) {
					return colors[index].name;
				}
			} else {
				if (index != -1) {
					return colors[index].colorVal;
				}
			}
			return '';
		},

		toDetail(obj) {
			// eslint-disable-next-line vue/custom-event-name-casing
			this.$emit('toPage', obj);

			// uni.navigateTo({
			// 	url:"/subpages/approve/repairDetail?planId="+obj.planId+"&elevatorId="+obj.elevatorId+"&businessApproveId="+obj.businessApproveId
			// })
		},
	},
};
</script>

<style lang="scss" scoped>
%widthPage {
  width: 680rpx;
  margin: 0 auto;
  background-color: #ffffff;
}

@mixin fontColors($px, $count, $colour) {
  font-size: $px;
  font-weight: $count;
  color: $colour;
}

.wrapper {
  padding: 0 20rpx;

  .myContent {
    background: #ffffff;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .myContent_LR {
      display: flex;
      align-items: center;

      .myL {
        width: 100%;

        .myLbox {
          display: flex;
          justify-content: space-between;
          margin-bottom: 18rpx;
        }

        .myL_title {
          text {
            display: inline-block;
          }

          .status {
            padding: 0rpx 8rpx;
            border-radius: 8rpx;
            font-size: 26rpx !important;
            font-weight: normal !important;
            margin-left: 10rpx;
          }

          .tag {
            border: 2rpx solid transparent;
          }

          .tit_rep {
            color: #0091ff;
            background: #dcf0ff;
          }

          text:nth-of-type(1) {
            font-size: 28rpx;
            font-weight: bold;
            color: #333333;
            display: inline-block;
          }

          .red {
            color: #e02020;
          }
        }

        .myL_Time {
          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
          margin-bottom: 15rpx;
        }

        .myL_reptit {
          min-height: 40rpx;
          display: flex;
          flex-direction: row;

          view:nth-of-type(1) {
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
            flex: 0 0 115rpx;
          }

          .myL_state {
            border: 2rpx solid #0091ff;
            border-radius: 8rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #0091ff;
            padding: 0 15rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .myL_repName {
            font-size: 24rpx;
            font-weight: 400;
            color: #333333;
          }
        }

        .paddingB {
          padding-bottom: 8rpx;
        }

        .myL_tit {
          margin-bottom: 4rpx;
          min-height: 40rpx;
          display: flex;
          flex-direction: row;

          view:nth-of-type(1) {
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
            width: 115rpx;
          }

          view:nth-of-type(2) {
            width: calc(100% - 115rpx);
            font-size: 24rpx;
            font-weight: 400;
            color: #333333;
            // width: 320rpx;
          }
          .red {
            color: #e02020 !important;
          }
        }
      }

      .myR_state {
        min-width: 160rpx;
        width: 160rpx;
        text-align: right;

        text:nth-of-type(1) {
          font-size: 24rpx;
          font-weight: 400;
          color: #fa6400;
          display: inline-block;
          margin-right: 5rpx;
        }

        text:nth-of-type(2) {
          display: inline-block;
          width: 12rpx;
          height: 12rpx;
          border-right: 2rpx #fa6400 solid;
          border-top: 2rpx #fa6400 solid;
          transform: rotate(45deg);
        }
      }
    }

    .myBg_relation {
      background: #f6f6f6;
      border-radius: 8rpx;
      padding: 16rpx 20rpx;
      margin-top: 8rpx;

      .relation_up {
        margin-bottom: 8rpx;

        &:nth-last-child(1) {
          margin-bottom: 0;
        }

        text {
          display: inline-block;
        }

        text:nth-of-type(1) {
          width: 160rpx;
          font-size: 24rpx;
          color: #999999;
        }

        text:nth-of-type(2) {
          font-size: 24rpx;
          color: #333333;
          margin-left: 10rpx;
        }

        text:nth-of-type(3) {
          margin-left: 10rpx;
          background: #0091ff;
          border-radius: 4rpx;
          font-size: 20rpx;
          font-weight: 400;
          color: #ffffff;
          padding: 0 5rpx;
        }

        .tag {
          display: inline-block;
          color: #0091ff;
          height: 32rpx;
          line-height: 32rpx;
          border: 1px solid #0091ff;
          padding: 0 8rpx;
          border-radius: 4rpx;
          font-size: 24rpx;
          max-width: fit-content;
          margin-left: 16rpx;
        }
      }

      .relation_down {
        display: flex;
        align-items: center;
        margin-top: 10rpx;

        view:nth-of-type(1) {
          font-size: 24rpx;
          color: #999999;
        }

        .down_text {
          margin-left: 10rpx;

          text {
            margin-right: 10rpx;
            display: inline-block;
            border: 2rpx solid #e02020;
            border-radius: 8rpx;
            font-size: 20rpx;
            color: #e02020;
            padding: 2rpx 10rpx;
          }
        }

        .malPartsNames {
          color: #666;
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
